<template>
  <div class="ListBox">
    <template v-if="arr && arr.length > 0">
      <div class="ListBox-item" v-for="(item, index) in arr" :key="index" :class="{
        active: activeKey && active ? item[activeKey] === active : item.isAll,
      }" :style="{
        padding: typeof padding === 'number' ? `${padding}px` : padding,
        marginBottom: index !== arr.length - 1 ? (typeof margin === 'number' ? `${margin}px` : margin) : 0,
      }" @click.stop="onClick(item, index)">
        <div class="ListBox-center" :class="{
          textOverflow: isOverflow,
        }">
          <slot :row="item" :index="index" v-if="$slots.default" />
          <p v-else>{{ item }}</p>
        </div>
        <div class="ListBox-btn list-r-6" v-if="$slots.btn && (!item.isAll && !item.isNotEdit)">
          <slot name="btn" :row="item" :index="index" />
        </div>
      </div>
    </template>
    <el-empty :description="description" :image-size="120" v-else />
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
const props = withDefaults(
  defineProps<{
    data?: any; //数据
    margin?: number | string; //行间距
    padding?: number | string; //内间距
    description?: string;
    activeKey?: string;
    active?: string;
    isActive?: Function; //选择状态
    isOverflow?: boolean; //文本是否超出隐藏
  }>(),
  {
    data: [],
    margin: 0,
    padding: 8,
    description: '暂无数据',
  },
);
const arr = computed({
  get() {
    if (props.data) {
      if (Array.isArray(props.data)) {
        return props.data;
      } else if (typeof props.data === 'number') {
        let length: number = props.data;
        return Array.from({ length }).map((_, columnIndex) => columnIndex + 1);
      } else {
        return [];
      }
    } else {
      return [];
    }
  },
  set(val) { },
});
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'onClick', row: any, index: number): void;
}>();
const onClick = (row: any, index: number) => {
  emit('onClick', row, index);
};
</script>
<style scoped lang="scss">
.ListBox {
  .ListBox-item {
    display: flex;
    align-items: center;
    cursor: pointer;

    >* {
      &:not(:last-child) {
        margin-right: 8px;
      }
    }

    &:not(:hover) {
      .ListBox-btn {
        display: none;
      }
    }

    .ListBox-center {
      flex: 1;
      overflow: hidden;

      &.textOverflow {
        -webkit-line-clamp: 1;
        /* 限制文本显示的行数为2行 */
        -webkit-box-orient: vertical;
        /* 设置盒模型布局方向为垂直 */
        display: -webkit-box;
        /* 使用旧版WebKit内核布局盒模型 */
        overflow: hidden;
        /* 超出部分隐藏 */
        text-overflow: ellipsis;
        /* 使用省略号表示被截断的部分 */
      }
    }

    &:hover {
      background: rgba(#333, 0.1);

      .ListBox-btn {
        display: flex;
        align-items: center;

        >* {
          &:not(:last-child) {
            margin-right: 8px;
          }
        }
      }
    }

    &.active {
      background: $primary;
      color: $white;
    }
  }
}
</style>
